<template>
    <div class="changePhone">
        <div class="item-content">
            <img style="width: 100%;" src="/images/bg.jpg">
        </div>
        <div class="item-input">
            <van-field
                    v-show="oldMobileShow"
                    v-model="oldMobile"
                    required
                    clearable
                    label="旧手机号码"
                    disabled
                    placeholder="请输入您旧的手机号码"
            />
            <van-field
                    v-show="newMobileShow"
                    v-model="newMobile"
                    required
                    clearable
                    label="新手机号码"
                    placeholder="请输入您新的手机号码"
            />
            <van-field
                    v-model="smsCode"
                    center
                    clearable
                    required
                    label="短信验证码"
                    placeholder="输入手机验证码"
            >
                <van-button slot="button" size="small" type="primary" :disabled="!btnStatus"
                            @click="btnStatus&&sendSmsCode('changePhone');">{{smsText}}
                </van-button>
            </van-field>
            <br/>
            <van-button size="large" class="save-button main-theme-color" @click="checkPhone" v-show="checkShow">{{btnTxt}}
            </van-button>
            <van-button size="large" class="save-button main-theme-color" @click="changePhone" v-show="changeShow">{{btnTxt}}
            </van-button>
        </div>
    </div>
</template>

<script>
    import Vue from 'vue'
    import {mapGetters,mapMutations} from 'vuex'
    import {Toast,Loading } from 'vant';
    import Cookies from 'js-cookie';

    Vue.use(Toast)
    export default {
        name: "ChangePhone",
        data() {
            return {
                oldMobileShow:true,
                newMobileShow:false,
                checkShow:true,
                changeShow:false,
                oldMobile: '',
                newMobile: '',
                smsCode: '',
                smsText: '获取验证码',
                token: '',
                time: 300,
                btnStatus: true,
                btnTxt: '修改'
            }
        },

        mounted() {
            this.token = Cookies.get("token")
            this.oldMobile = this.$route.query.oldMobile
        },
        computed:{
            ...mapGetters(['userInfo'])
        },
        methods: {
            ...mapMutations(['setUserInfo']),
            sendSmsCode(smstype) {
                var phone_pattern = /^0?(1[0-9])[0-9]{9}$/
                var mobile = null
                if(this.newMobileShow){
                    mobile = this.newMobile
                }else{
                    mobile = this.oldMobile
                }
                if (mobile == null || !phone_pattern.test(mobile) || mobile == "") {
                    Toast("请输入正确的手机号码，例如：13500000000")
                    return
                }
                if(this.newMobileShow&&this.newMobile&&this.oldMobile&&this.newMobile===this.oldMobile){
                    Toast("请勿填写旧手机号码")
                    return
                }

                this.$api.personInf.sendSms({openid: this.token, mobile: mobile, smstype: smstype}).then(res => {
                    if (res.code == 0) {
                        var data = res.data
                        var flag = data.flag
                        var msg = data.msg
                        this.time = data.seconds
                        if (flag) {
                            Toast(msg);
                            this.fun_timedownn()
                        } else {
                            this.smsText = '重新获取'
                            Toast(msg);
                        }
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            fun_timedownn() {
                let timer = window.setInterval(() => {
                    this.time--
                    if (this.time < 0) {
                        window.clearInterval(timer)
                        this.smsText = '获取验证码'
                        this.btnStatus = true
                    } else {
                        this.smsText = this.time + "秒"
                        this.btnStatus = false
                    }
                }, 1000)
            },
            checkPhone() {
                let phone_pattern = /^0?(1[0-9])[0-9]{9}$/
                if (this.oldMobile == null || !phone_pattern.test(this.oldMobile) || this.oldMobile == "") {
                    Toast("请输入正确的手机号码，例如：13500000000")
                    return
                }
                if (this.smsCode == null || this.smsCode == "") {
                    Toast("请输入手机验证码")
                    return
                }
                this.$api.personInf.changePhone({
                    openid: this.token,
                    mobile: this.oldMobile,
                    smsCode: this.smsCode,
                    checkStatus: 0
                }).then(res => {
                    if (res.code == 0) {
                        this.oldMobileShow = false
                        this.newMobileShow = true
                        this.checkShow = false
                        this.changeShow = true
                        this.smsCode = ''
                        this.time = 0
                        this.btnStatus = true
                        this.btnTxt = '提交'
                        this.smsText = '获取验证码'
                    }else {
                        Toast(res.msg)
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
        changePhone() {
            let phone_pattern = /^0?(1[0-9])[0-9]{9}$/
            if (this.newMobile == null || !phone_pattern.test(this.newMobile) || this.newMobile == "") {
                Toast("请输入正确的手机号码，例如：13500000000")
                return
            }
            if (this.smsCode == null || this.smsCode == "") {
                Toast("请输入手机验证码")
                return
            }
            if(this.newMobile&&this.oldMobile&&this.newMobile===this.oldMobile){
                Toast("请勿填写旧手机号码")
                return
            }

            this.$api.personInf.changePhone({
                openid: this.token,
                mobile: this.newMobile,
                smsCode: this.smsCode,
                checkStatus: 1
            }).then(res => {
                if (res.code == 0) {
                    Toast('手机更换成功！')
                    setTimeout(() => {
                        this.$store.dispatch("fetchUserInfo")
                        this.goToView('/account')
                    }, 2000)
                }else {
                    Toast(res.msg)
                }
            }).catch(err => {
                console.log(err)
            })
        },goToView(path) {
                this.$router.push(path)
            }
        }
    }
</script>

<style lang="less">
    @import "../../assets/less/base";
    .main-theme-color{
      background-color: @main-theme-color;
    }
    .item-content {

    }

    .item-input {
        margin: 0.75rem;
    }

    .save-button {
        line-height: 2.4rem;
        color: #fff;
        font-size: .85rem;
        height: 2.4rem;
        border: none;
        text-decoration: none;
        text-align: center;
        display: block;
        border-radius: 0.25rem;
        box-sizing: border-box;
        -webkit-appearance: none;
        padding: 0 .5rem;
        margin: 0;
        white-space: nowrap;
        position: relative;
        text-overflow: ellipsis;
        font-family: inherit;
        cursor: pointer;
    }
</style>
